<template>
    <div>
        <h1>人员列表</h1>
        <h3>Count组件的求和结果为：{{ sum}}</h3>
        <input type="text" placeholder="请输入姓名" v-model="name">
        <button @click="addPerson">添加</button>
        <ul>
            <li v-for="person in personList" :key="person.id">{{ person.name }}</li>
        </ul>
    </div>
</template>

<script>
    import { mapState,mapGetters,mapActions,mapMutations } from 'vuex';
    import { nanoid } from 'nanoid';
    export default {
        name:'Person',
        data(){
            return {
                name:''
            }
        },
        computed:{
            ...mapState(['personList','sum'])
        },
        methods:{
            addPerson(){
                const person = {id:nanoid(),name:this.name}
                this.$store.commit('ADD_PERSON',person)
                this.name = ''
            },
        
        }
    }
</script>